<template>
  <div class="appointment-details-page">
    <van-nav-bar title="预约详情" left-arrow @click-left="goBack" />
    
    <div v-if="loading" class="loading-container">
      <van-loading type="spinner" size="24px" />
      <p>加载中...</p>
    </div>

    <div v-else-if="appointmentRecord" class="details-container">
      <!-- 成功状态图标 -->
      <div class="success-icon">
        <van-icon name="success" size="40" color="#1989fa" />
      </div>
      <div class="success-title">预约成功</div>

      <!-- 预约详情卡片 -->
      <div class="appointment-details-card">
        <!-- 医生信息 -->
        <div class="doctor-info">
          <div class="doctor-avatar">
            <van-image
              src="https://img.yzcdn.cn/vant/cat.jpeg"
              width="60"
              height="60"
              round
              fit="cover"
            />
          </div>
          <div class="doctor-details">
            <div class="doctor-name">{{ appointmentRecord.attendingName }}</div>
            <div class="doctor-title">{{ appointmentRecord.doctorName }}</div>
          </div>
        </div>

        <!-- 医院信息 -->
        <div class="hospital-info">
          <div class="info-item">
            <span class="label">就诊医院</span>
            <span class="value">{{ appointmentRecord.attending }}</span>
          </div>
          <div class="info-item">
            <span class="label">医院地址</span>
            <span class="value">{{ appointmentRecord.doctorAddress }}</span>
            <van-icon name="location-o" size="16" color="#1989fa" />
          </div>
        </div>

        <!-- 科室和位置 -->
        <div class="department-info">
          <div class="info-item">
            <span class="label">就诊科室</span>
            <span class="value">{{ appointmentRecord.department }}</span>
          </div>
        </div>

        <!-- 时间信息 -->
        <div class="time-info">
          <div class="info-item">
            <span class="label">门诊时间</span>
            <span class="value">{{ formatDate(appointmentRecord.outpatientTime) }}</span>
          </div>
          <div class="info-item">
            <span class="label">候诊时间</span>
            <span class="value">{{ formatTime(appointmentRecord.waitingTime) }}</span>
          </div>
        </div>

        <!-- 费用信息 -->
        <div class="cost-info">
          <div class="info-item">
            <span class="label">费用</span>
            <span class="value cost">¥{{ appointmentRecord.cost }}</span>
            <span class="payment-note">(就诊时支付)</span>
          </div>
        </div>

        <!-- 预约时间 -->
        <div class="appointment-time">
          <div class="info-item">
            <span class="label">预约时间</span>
            <span class="value">{{ formatDate(appointmentRecord.appointmentTime) }}</span>
          </div>
        </div>
      </div>

      <!-- 患者信息卡片 -->
      <div class="patient-info-card">
        <div class="info-item">
          <span class="label">就诊人</span>
          <span class="value">{{ appointmentRecord.name }}</span>
        </div>
        <div class="info-item">
          <span class="label">身份证号</span>
          <span class="value">{{ maskIdCard(appointmentRecord.idCardNum) }}</span>
        </div>
      </div>

      <!-- 状态信息 -->
      <div class="status-info" v-if="appointmentRecord.reason || appointmentRecord.cancelTime">
        <div class="status-item">
          <span class="label">状态</span>
          <span class="value cancelled">已取消</span>
        </div>
        <div class="status-item" v-if="appointmentRecord.reason">
          <span class="label">取消原因</span>
          <span class="value">{{ appointmentRecord.reason }}</span>
        </div>
        <div class="status-item" v-if="appointmentRecord.cancelTime">
          <span class="label">取消时间</span>
          <span class="value">{{ formatDateTime(appointmentRecord.cancelTime) }}</span>
        </div>
      </div>
    </div>

    <div v-else class="error-container">
      <van-empty description="预约信息不存在" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { api, type AppointmentRecord } from '../../api'

const router = useRouter()
const route = useRoute()

// 响应式数据
const appointmentRecord = ref<AppointmentRecord | null>(null)
const loading = ref(true)

// 方法
const goBack = () => {
  router.back()
}

const formatDate = (dateTime: string) => {
  const date = new Date(dateTime)
  const year = date.getFullYear()
  const month = String(date.getMonth() + 1).padStart(2, '0')
  const day = String(date.getDate()).padStart(2, '0')
  const weekdays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
  const weekday = weekdays[date.getDay()]
  
  const hour = date.getHours()
  let timePeriod = ''
  if (hour < 12) {
    timePeriod = '上午'
  } else if (hour < 18) {
    timePeriod = '下午'
  } else {
    timePeriod = '晚上'
  }
  
  return `${year}年${month}月${day}日 ${weekday}${timePeriod}`
}

const formatTime = (dateTime: string) => {
  const date = new Date(dateTime)
  const hour = String(date.getHours()).padStart(2, '0')
  const minute = String(date.getMinutes()).padStart(2, '0')
  return `${hour}:${minute}`
}

const formatDateTime = (dateTime: string) => {
  const date = new Date(dateTime)
  return date.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit'
  }).replace(/\//g, '-')
}

const maskIdCard = (idCard: string) => {
  if (!idCard) return ''
  if (idCard.length <= 8) return idCard
  return idCard.substring(0, 6) + '********' + idCard.substring(idCard.length - 4)
}

const loadAppointmentDetails = async () => {
  const appointmentId = route.params.appointmentId as string
  if (!appointmentId) {
    loading.value = false
    return
  }

  try {
    const response = await api.getAppointmentRecordById(parseInt(appointmentId))
    if (response.data) {
      appointmentRecord.value = response.data
    }
  } catch (error) {
    console.error('获取预约详情失败:', error)
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  loadAppointmentDetails()
})
</script>

<style scoped>
.appointment-details-page {
  min-height: 100vh;
  background-color: #f7f8fa;
}

.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  color: #646566;
}

.loading-container p {
  margin-top: 12px;
  font-size: 14px;
}

.details-container {
  padding: 20px 16px;
}

.success-icon {
  text-align: center;
  margin-bottom: 12px;
}

.success-title {
  text-align: center;
  font-size: 18px;
  font-weight: 500;
  color: #323233;
  margin-bottom: 24px;
}

.appointment-details-card,
.patient-info-card,
.status-info {
  background-color: white;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.doctor-info {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid #ebedf0;
}

.doctor-avatar {
  margin-right: 12px;
}

.doctor-details {
  flex: 1;
}

.doctor-name {
  font-size: 16px;
  font-weight: 500;
  color: #323233;
  margin-bottom: 4px;
}

.doctor-title {
  font-size: 14px;
  color: #646566;
}

.info-item {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid #f7f8fa;
}

.info-item:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.label {
  font-size: 14px;
  color: #646566;
  min-width: 80px;
  margin-right: 12px;
}

.value {
  font-size: 14px;
  color: #323233;
  flex: 1;
}

.cost {
  font-size: 16px;
  font-weight: 500;
  color: #ee0a24;
}

.payment-note {
  font-size: 12px;
  color: #969799;
  margin-left: 8px;
}

.cancelled {
  color: #969799;
}

.status-item {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.status-item:last-child {
  margin-bottom: 0;
}

.error-container {
  padding: 60px 20px;
  text-align: center;
}
</style>

